<template>
  <div class="container">
    <el-dialog title="提示" :visible="rousePreview" width="900px" @open="getDetails" @close="$emit('close')">
      <el-row type="flex" justify="space-between" class="form">
        <el-col
          ><div class="grid-content bg-purple-dark">【题型】:{{ questionType[particulars.questionType] }}</div></el-col
        >
        <el-col
          ><div class="grid-content bg-purple-dark">【编号】:{{ particulars.id }}</div></el-col
        >
        <el-col
          ><div class="grid-content bg-purple-dark">【难度】:{{ difficulty[particulars.difficulty] }}</div></el-col
        >
        <el-col
          ><div class="grid-content bg-purple-dark">【标签】:{{ particulars.tags }}</div></el-col
        >
      </el-row>
      <el-row type="flex">
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">【学科】:{{ particulars.subjectName }}</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">【目录】:{{ particulars.directoryName }}</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">【方向】:{{ particulars.direction }}</div></el-col
        >
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <span>【题干】：</span>

      <div v-html="particulars.question" style="color: blue"></div>

      <div v-if="particulars.questionType != 3">
        <div style="padding-bottom: 5px">{{ questionType[particulars.questionType] }} 选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in particulars.options" :key="item.code" style="padding: 8px 0">
          <el-radio v-if="particulars.questionType === '1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
          <el-checkbox v-if="particulars.questionType === '2'" :value="item.isRight ? true : false">{{ item.title }}</el-checkbox>
        </div>
      </div>
      <el-divider></el-divider>
      <div>【参考答案】: <el-button type="danger" size="mini" @click="show = true">视频答案预览</el-button></div>
      <div>
        <video :src="particulars.videoURL" class="video-box" v-if="show" controls="controls"></video>
      </div>
      <el-divider></el-divider>
      【答案解析】:
      <span v-html="particulars.answer"></span>

      <el-divider></el-divider>
      【题目备注】:
      <span v-html="particulars.remarks"></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
// import { html2Text } from '@/utils/'
export default {
  props: {
    rousePreview: {
      type: Boolean,
      required: true
    },
    datas: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      show: false,
      particulars: {},
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      }
    }
  },
  methods: {
    close() {
      this.$emit('closePreview', false)
      this.show = false
    },
    async getDetails() {
      const { data: res } = await detail(this.datas)
      this.particulars = res
      // html2Text(particulars.question)
      // this.particulars = this.particulars.map((itme) => (itme.question = html2Text(item.question)))
    }
  }
}
</script>

<style scoped lang='scss'>
.form {
  margin-bottom: 20px;
}
.el-divider--horizontal {
  background-color: #9a9a9a;
}
.video-box {
  width: 400px;
  height: 300px;
}
.html-box {
  color: #6767ff;
}
</style>
